264577 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

サンプル・15

テーブル見本

★ サンプル・15 ★

1.セルごとに背景色を設定したテーブル

1行1列目は黄色、2行2列目はオレンジ、3行3列目は赤を設定

(ソース)
<TABLE border="2">
<TR>
<TD bgcolor="#ffff00">1行1列め </TD><TD>1行2列め</TD>
<TD>1行3列め</TD>
</TR>
<TR>
<TD>2行1列め</TD><TD bgcolor="#ff9900">2行2列め</TD>
<TD>2行3列め</TD>
</TR>
<TR>
<TD>3行1列め</TD><TD>3行2列め</TD>
<TD bgcolor="#ff0000">3行3列め</TD>
</TR>
</TABLE>


(表示例)
1行1列め1行2列め1行3列め
2行1列め2行2列め2行3列め
3行1列め3行2列め3行3列め



2.色設定の優先順位

テーブル全体、行単位、セル単位の色設定が重複した場合、
優先順位は、高いほうからセル、行、テーブル全体の順になります。

テーブル全体をライム、1行目を水色、その1列目のセルを白にすると

(ソース)
<TABLE border="2" bgcolor="#00ff00">
<TR bgcolor="#00ffff">
<TD bgcolor="#ffffff">1行1列め</TD><TD>1行2列め</TD>
<TD>1行3列め</TD>
</TR>
<TR>
<TD>2行1列め</TD><TD>2行2列め</TD><TD>2行3列め</TD>
</TR>
<TR>
<TD>3行1列め</TD><TD>3行2列め</TD><TD>3行3列め</TD>
</TR>
</TABLE>


(表示例)
1行1列め1行2列め1行3列め
2行1列め2行2列め2行3列め
3行1列め3行2列め3行3列め



3.配色を考えたテーブル

配色って、けっこう難しい。色の選択を間違うと、
ぎらぎらした、とっても見にくいテーブルに……。
好みにもよるけど、どぎつい色の組み合わせは
避けたほうが無難。平凡になる可能性はあるけどね。

セル1Aセル1Bセル1C
セル2Aセル2Bセル2C
セル3Aセル3Bセル3C

※ソースは、6月1日の日記の練習コーナーに記載



© Rakuten Group, Inc.